<template>
    <div class="body">
        <Main :itemList="goodsList"></Main>
        <div class="wrapper">
            <el-pagination background layout="prev, pager, next" :total="totalNums" class="pagination" :page-size="searchParams.pageSize" @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<script>
import Main from "@/pages/Search/Main";
import { mapState } from "vuex";

export default {
    data() {
        return {
            searchParams: {
                keyword: this.$route.params.keyword,
                pageNo: 1,
                pageSize: 4,
            },
        };
    },
    components: {
        Main,
    },
    methods: {
        getData() {
            this.$store.dispatch("search/getSearchResult", this.searchParams);
        },
        handleCurrentChange(val) {
            this.searchParams.pageNo = val;
            this.getData();
        },
    },
    mounted() {
        this.getData();
    },
    computed: {
        ...mapState("search", ["searchResult", "totalNums"]),
        goodsList() {
            return this.searchResult.filter((item) => item.good.isSell == 1);
        },
    },
    watch: {
        $route(newValue, oldValue) {
            this.searchParams = Object.assign(
                this.searchParams,
                this.$route.params
            );
            this.getData();
        },
    },
};
</script>

<style scoped>
.body {
    font: 12px tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53",
        sans-serif;
    background-color: #f5f5f5;
    min-width: 1200px;
    /*开启相对定位是为了让子元素绝对定位定位到body，不然会定位到显示器的第一视图*/
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 130px;
}
.wrapper {
    background-color: white;
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.pagination {
    display: flex;
    justify-content: center;
}
</style>